import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:travel/model/hotel.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class HotelInfoController extends GetxController {
  RxDouble opacity = 0.0.obs;

  Rx<HotelModel> hotel = Rx(HotelModel(
      name: '锦江之星风尚酒店(北海三里屯店)',
      address: '北海市海城区东直门外南二里庄29号1幢',
      price: 579,
      area: '海城区',
      imgUrl:
          'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00002-713.jpg'));

  late ScrollController scrollController;

  RxList<HotelModel> pageList = RxList([]);

  RxBool isLoading = false.obs;

  RxBool hasNext = true.obs;

  RxInt total = 35.obs;

  RxBool isCollect = false.obs;

  RxDouble offset = 0.0.obs;

  String statusBarMode = 'light';

  @override
  void onInit() {
    if (Get.arguments != null) {
      hotel.value = Get.arguments['hotel'];
    }
    scrollController = ScrollController()
      ..addListener(() {
        offset.value = scrollController.offset;
        Get.log('offset = ${scrollController.position.pixels} \tval = ${scrollController.offset}');
        updateStatusBarBrightness();
        double value = (scrollController.offset / 50.0).toDouble().clamp(0.0, 1.0);
        opacity.value = value;
        if (isLoading.isFalse &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          isLoading.value = true;
          loadMoreData();
        }
      });
    initData();
    super.onInit();
  }

  @override
  void onReady() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    super.onReady();
  }

  void updateStatusBarBrightness() {
    Get.log('statusBarMode = $statusBarMode');
    if (scrollController.offset > 50.0 && statusBarMode == 'light') {
      statusBarMode = 'dark';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    } else if (scrollController.offset <= 50.0 && statusBarMode == 'dark') {
      statusBarMode = 'light';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    }
  }

  Color makeStickyHeaderTextColor(bool isIcon) {
    if (offset <= 50.0) {
      return isIcon ? Colors.white : Colors.transparent;
    } else {
      final int alpha = (offset / 50.0 * 255).clamp(0, 255).toInt();
      return Color.fromARGB(alpha, 0, 0, 0);
    }
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 1), () {
      if (total.value > pageList.length) {
        hasNext.value = true;
        isLoading.value = false;
        initData();
        return;
      }
      hasNext.value = false;
      isLoading.value = false;
    });
  }

  void initData() {
    pageList.add(HotelModel(
        name: '锦江之星风尚酒店(北海三里屯店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 579,
        area: '海城区',
        imgUrl:
            'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00002-713.jpg'));
    pageList.add(HotelModel(
        name: '北海万达文华酒店',
        address: '北海市银海区东直门外南二里庄29号1幢',
        price: 399,
        area: '银海区',
        imgUrl:
            'https://img1.baidu.com/it/u=2046807301,2551492904&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500'));
    pageList.add(HotelModel(
        name: '北海广渠门漫心酒店',
        address: '北海市合浦县东直门外南二里庄29号1幢',
        price: 478,
        area: '合浦县',
        imgUrl:
            'https://img1.baidu.com/it/u=1512264951,2503995626&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800'));
    pageList.add(HotelModel(
        name: '锦江之星风尚酒店(北海三里屯店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 389,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=3206337597,3928032791&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
    pageList.add(HotelModel(
        name: '北海望京希尔顿欢朋酒店',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 189,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=874687570,4272745671&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
    pageList.add(HotelModel(
        name: '全季酒店(北海天坛店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 489,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=1915459,4007195949&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
  }
}

class HotelInfoView extends GetView<HotelInfoController> {
  const HotelInfoView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => buildBody(context));
  }

  Widget buildBody(BuildContext context) {
    return Container(
      width: Get.width,
      height: Get.height,
      color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
      child: Stack(
        children: [
          Image.network(
            controller.hotel.value.imgUrl,
            width: Get.width,
            height: 240.h,
            fit: BoxFit.fill,
          ),
          SizedBox(
              width: Get.width,
              height: Get.height,
              child: Scaffold(
                backgroundColor: Colors.transparent,
                body: CustomScrollView(
                  controller: controller.scrollController,
                  slivers: [
                    SliverAppBar(
                      pinned: true,
                      automaticallyImplyLeading: true,
                      backgroundColor: ColorsUtils.rgba(255, 255, 255, controller.opacity.value),
                      leading: InkWell(
                        onTap: Get.back,
                        child: Icon(
                          Icons.arrow_back_ios,
                          color: controller.makeStickyHeaderTextColor(true),
                          size: 20.w,
                        ),
                      ),
                      leadingWidth: 40.w,
                      title: Opacity(
                          opacity: controller.opacity.value,
                          child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                controller.hotel.value.name,
                                style: StylesUtils.customTextStyle(
                                    fontSize: 16.sp,
                                    color: ColorsUtils.color3333,
                                    fontWeight: FontWeight.w700),
                              ))),
                      actions: [
                        IconButton(
                          icon: Icon(
                            Icons.share,
                            color: controller.makeStickyHeaderTextColor(true),
                          ),
                          onPressed: () {
                            ToolsUtils.openShare(context);
                          },
                        ),
                      ],
                    ),
                    SliverPadding(
                        padding: EdgeInsets.only(top: 150.h),
                        sliver: SliverToBoxAdapter(
                          child: Container(
                            padding:
                                EdgeInsets.only(top: 15.h, left: 15.w, right: 15.w, bottom: 20.h),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(15.w),
                                    topRight: Radius.circular(15.w))),
                            child: Row(
                              children: [
                                Expanded(
                                    child: Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    controller.hotel.value.name,
                                    style: StylesUtils.customTextStyle(
                                        fontWeight: FontWeight.w700,
                                        color: ColorsUtils.color3333,
                                        fontSize: 22.sp),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                )),
                                InkWell(
                                  onTap: () {
                                    controller.isCollect.value = !controller.isCollect.value;
                                  },
                                  child: SizedBox(
                                    width: 40.w,
                                    child: Column(
                                      children: [
                                        Center(
                                          child: ToolsUtils.assetImageSvg(
                                              controller.isCollect.isTrue
                                                  ? 'u1574.svg'
                                                  : 'u1571.svg',
                                              width: 18.w,
                                              height: 18.h),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 4.h),
                                          alignment: Alignment.center,
                                          child: Text(
                                            controller.isCollect.isTrue ? '已收藏' : '收藏',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: 12.sp,
                                              color: controller.isCollect.isTrue
                                                  ? ColorsUtils.color3478
                                                  : ColorsUtils.color9999,
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        )),
                    SliverToBoxAdapter(
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 15.w),
                        decoration: const BoxDecoration(color: Colors.white),
                        child: Column(
                          children: [
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Wrap(
                                spacing: 5.w,
                                children: [
                                  ToolsUtils.assetImageSvg('u1524.svg', width: 13.w, height: 16.h),
                                  Text(
                                    controller.hotel.value.address,
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                                  ),
                                  Text(
                                    '到这里',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6799, fontSize: 12.sp),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              padding: EdgeInsets.only(top: 10.h, bottom: 15.h),
                              child: Wrap(
                                spacing: 5.w,
                                children: [
                                  ToolsUtils.assetImageSvg('u1523.svg', width: 14.w, height: 14.h),
                                  Text(
                                    '010-64788100',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
                        decoration: const BoxDecoration(color: Colors.white),
                        child: Row(
                          children: [
                            Center(
                              child:
                                  ToolsUtils.assetImageSvg('u1529.svg', width: 14.w, height: 14.h),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 15.w),
                              alignment: Alignment.centerLeft,
                              child: Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '11月25日',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: 16.sp,
                                        fontWeight: FontWeight.w700)),
                                TextSpan(
                                    text: ' 今日',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 13.sp, color: ColorsUtils.color3333))
                              ])),
                            ),
                            Container(
                              margin: EdgeInsets.symmetric(horizontal: 30.w),
                              child: Chip(
                                label: const Text('1晚'),
                                labelStyle: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: 12.sp),
                                labelPadding: EdgeInsets.zero,
                                padding: EdgeInsets.zero,
                                elevation: 0,
                                backgroundColor:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorEfef),
                                side: BorderSide.none,
                                shape: CircleBorder(),
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '11月26日',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: 16.sp,
                                        fontWeight: FontWeight.w700)),
                                TextSpan(
                                    text: ' 明天',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 13.sp, color: ColorsUtils.color3333))
                              ])),
                            )
                          ],
                        ),
                      ),
                    ),
                    SliverList(
                        delegate: SliverChildBuilderDelegate((_, index) {
                      var row = controller.pageList[index];
                      return Container(
                        padding: EdgeInsets.only(top: 15.h),
                        decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
                        ),
                        child: Container(
                          height: 155.h,
                          padding: EdgeInsets.only(left: 20.w, top: 20.h, right: 15.w),
                          decoration: const BoxDecoration(color: Colors.white),
                          child: Stack(
                            fit: StackFit.expand,
                            children: [
                              SizedBox(
                                height: 90.h,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5.w),
                                      child: CachedNetworkImage(
                                        imageUrl: row.imgUrl,
                                        width: 90.w,
                                        height: 90.h,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                    Expanded(
                                        child: Container(
                                      padding: EdgeInsets.only(left: 10.w),
                                      child: Column(
                                        children: [
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              row.name,
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: 15.sp,
                                                  fontWeight: FontWeight.w700,
                                                  color: ColorsUtils.color3333),
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                          ),
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            padding: EdgeInsets.symmetric(vertical: 20.h),
                                            child: Text(
                                              '不含早 | 即时确认 | 不允许取消',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: 12.sp, color: ColorsUtils.color9999),
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                          ),
                                          Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text.rich(TextSpan(children: [
                                                TextSpan(
                                                    text: '￥',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 13.sp,
                                                        color: ColorsUtils.colorD900)),
                                                TextSpan(
                                                    text: ' ${row.price} ',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 20.sp,
                                                        fontWeight: FontWeight.w700,
                                                        color: ColorsUtils.colorD900)),
                                                TextSpan(
                                                    text: '起',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 12.sp,
                                                        color: ColorsUtils.color9999))
                                              ])))
                                        ],
                                      ),
                                    ))
                                  ],
                                ),
                              ),
                              Positioned(
                                  right: 20.w,
                                  bottom: 20.h,
                                  child: Container(
                                    constraints: BoxConstraints.expand(width: 50.w, height: 30.h),
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(5.w),
                                        gradient: LinearGradient(
                                            colors: [
                                              ColorsUtils.rgba(52, 120, 246, 1),
                                              ColorsUtils.rgba(2, 167, 240, 1),
                                            ],
                                            stops: const [
                                              0,
                                              0.99
                                            ],
                                            transform:
                                                GradientRotation(RadianUtils.angleToRadian(90)))),
                                    alignment: Alignment.center,
                                    child: TextButton(
                                        onPressed: () {
                                          Get.toNamed(RoutePath.hotelReserve,
                                              arguments: {'hotel': row});
                                        },
                                        child: Text(
                                          '预定',
                                          style: StylesUtils.customTextStyle(fontSize: 13.sp),
                                        )),
                                  ))
                            ],
                          ),
                        ),
                      );
                    }, childCount: controller.pageList.length)),
                    SliverToBoxAdapter(child: renderBottom())
                  ],
                ),
              ))
        ],
      ),
    );
  }

  Widget renderBottom() {
    if (controller.hasNext.isFalse) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        color: Colors.white,
        child: const Text(
          '已经到底',
          style: TextStyle(
            fontSize: 15,
            color: Color(0xFF333333),
          ),
        ),
      );
    }
    if (controller.isLoading.isTrue) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        color: Colors.white,
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      color: Colors.white,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }
}
